<!DOCTYPE html><html lang="en"><head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Full JXM (JSONX Markup) JSON Spec</title>
  <link rel="stylesheet" href="https://unpkg.com/style.css">
  <style type="text/css">
    .markdown-body {
      max-width: 46em;
      margin: 2em auto;
      padding: 0 1em;
      overflow: hidden;
      word-wrap: break-word;
    }
  </style>
</head>
<body>
  <main class="markdown-body"><link id="viewx-style-style-0" rel="stylesheet" type="text/css" href="https://unpkg.com/highlight.js@9.18.1/styles/darkula.css">
<hr>
<h3>JSONX Manual</h3>
<ul>
<li><a href="https://repetere.github.io/jsonx/">Home</a></li>
<li><a href="../getting-started/index.html">Getting Started</a></li>
<li><a href="../using-advanced-props/index.html">Using Advanced Props</a></li>
<li><a href="../using-external-and-custom-components/index.html">External and Custom Components</a></li>
<li><a href="../creating-react-components-and-component-libraries/index.html">Creating React Components and Component Libraries</a></li>
<li><a href="../spec/index.html">JSONX &amp; JXM Spec</a></li>
<li><a href="../samples/index.html">Samples</a></li>
<li><a href="../roadmap/index.html">Roadmap</a></li>
<li><a href="../../index.html">Full API Docs</a></li>
</ul>
<hr>
<h1>Full JXM (JSONX Markup) JSON Spec</h1>
<p>A JXM JSON Object is valid JSON Object that more or less mimics JSX in JSON notation with a couple of special properties. The properties for JSONX JSON are the arguments passed to <a href="https://reactjs.org/docs/react-api.html#createelement">React.createElement</a>. The only required property is the component (which is passed as the <code>type</code> argument)</p>
<pre><code class="hljs language-javascript"><span class="hljs-title class_">React</span>.<span class="hljs-title function_">createElement</span>(
  type,
  [props],
  [...children]
)
</code></pre>
<p>The full <a href="../../interfaces/_types_jsonx_jsonx_.jsonx.html">type definition</a> is also available.</p>
<pre><code class="hljs language-typescript">jxm = {
  <span class="hljs-comment">//standard properties</span>
  <span class="hljs-attr">component</span>:<span class="hljs-title class_">String</span>, <span class="hljs-comment">// Any React DOM element, or custom component div,p, Boomer.Hero, MaterialUI.Button, myCustomComponent (can also use the property 'type' instead of 'component')</span>
  <span class="hljs-attr">props</span>:<span class="hljs-title class_">Object</span>, <span class="hljs-comment">// Standard React component properties</span>
  <span class="hljs-attr">children</span>:<span class="hljs-title class_">Array</span>|<span class="hljs-title class_">String</span>, <span class="hljs-comment">// Any String or Array of valid JSONX JSON objects</span>


  <span class="hljs-comment">//traverse properties</span>
  <span class="hljs-attr">resourceprops</span>:<span class="hljs-title class_">Object</span>, <span class="hljs-comment">// An object from async resources to merge onto jsonx.props once fully resolved</span>
  <span class="hljs-attr">asyncprops</span>:<span class="hljs-title class_">Object</span>, <span class="hljs-comment">// An object from async resources to merge onto jsonx.props once fully resolved (alias for resourceprops)</span>
  <span class="hljs-attr">thisprops</span>:<span class="hljs-title class_">Object</span>, <span class="hljs-comment">// An object to merge onto jsonx.props from properties already bound to this.props</span>
  <span class="hljs-attr">thisstate</span>:<span class="hljs-title class_">Object</span>, <span class="hljs-comment">// An object to merge onto jsonx.props from properties already bound to this.state</span>
  <span class="hljs-attr">thiscontext</span>:<span class="hljs-title class_">Object</span>, <span class="hljs-comment">// An object to merge onto jsonx.props from properties already bound to this</span>
  <span class="hljs-attr">windowprops</span>:<span class="hljs-title class_">Object</span>, <span class="hljs-comment">// An object to merge onto jsonx.props from the window object</span>


  <span class="hljs-comment">//evaluation properties</span>
  <span class="hljs-attr">__dangerouslyEvalProps</span>:<span class="hljs-title class_">Object</span>, <span class="hljs-comment">// An object of evaluated JavaScript strings, used as inline functions onto jsonx.props, if the prop is a function it will be called bound to 'this' and the returned value will be assigned</span>
  <span class="hljs-attr">__dangerouslyBindEvalProps</span>:<span class="hljs-title class_">Object</span>, <span class="hljs-comment">// An object of evaluated JavaScript functions that are bound to this, used as inline functions onto jsonx.props</span>
  <span class="hljs-attr">__dangerouslyEvalAllProps</span>:<span class="hljs-title class_">Object</span>, <span class="hljs-comment">// evaluate strings to generate props that are functions bound to `this`</span>
  <span class="hljs-attr">__functionProps</span>:<span class="hljs-title class_">Object</span>, <span class="hljs-comment">// An object of parsed function strings(func:this.props.onClick, func:window.localStorage.getItem),merged onto jsonx.props</span>
  <span class="hljs-attr">__dangerouslyInsertJSONXComponents</span>:<span class="hljs-title class_">Object</span>, <span class="hljs-comment">// An object that turns each JSONX JSON value into a React components. This is typically used in a library like Recharts where you pass custom components for chart ticks or plot points.</span>
  <span class="hljs-attr">__dangerouslyInsertComponents</span>:<span class="hljs-title class_">Object</span>, <span class="hljs-comment">// An object that turns each JSONX JSON value into a React components. This is typically used in a library like Recharts where you pass custom components for chart ticks or plot points.</span>
  <span class="hljs-attr">__dangerouslyInsertReactComponents</span>:<span class="hljs-title class_">Object</span>, <span class="hljs-comment">// An object that returns the react element from either ReactDOM, reactComponents or componentLibraries.</span>
  <span class="hljs-attr">__dangerouslyInsertFunctionComponents</span>:<span class="hljs-title class_">Object</span>, <span class="hljs-comment">// An object that returns the react function component.</span>
  <span class="hljs-attr">__dangerouslyInsertClassComponents</span>:<span class="hljs-title class_">Object</span>, <span class="hljs-comment">// An object that returns the react class component.</span>
  <span class="hljs-attr">__spreadComponent</span>:<span class="hljs-title class_">Object</span>, <span class="hljs-comment">// A JSONX element that is mapped on any array prop called  __spread</span>
  <span class="hljs-attr">__windowComponents</span>:<span class="hljs-title class_">Object</span>, <span class="hljs-comment">// An object of components merged onto jsonx.props from window.__jsonx_custom_elements</span>
  <span class="hljs-attr">__windowComponentProps</span>:<span class="hljs-title class_">Object</span>, <span class="hljs-comment">// Returns a resolved object that has React Components pulled from window.</span>
  <span class="hljs-attr">_children</span>: <span class="hljs-title class_">Object</span>, <span class="hljs-comment">// any value assigned to _children will be set as the react element children property. This is typically used when you want to override what's passed as the children JXM property with a dynamic value later.</span>

  <span class="hljs-comment">//format properties</span>
  <span class="hljs-attr">___FromLuxonTimeZone</span>:<span class="hljs-title class_">String</span>, <span class="hljs-comment">// format date values as strings assigned to `children` prop using Luxon</span>
  <span class="hljs-attr">___ISOtoLuxonString</span>:<span class="hljs-title class_">String</span>, <span class="hljs-comment">//converts the children prop to from an ISO String to a Luxon formatted DateTime String </span>
  <span class="hljs-attr">___JSDatetoLuxonString</span>:<span class="hljs-title class_">String</span>, <span class="hljs-comment">//converts the children prop to from JavaScript Date to a Luxon formatted DateTime String </span>
  <span class="hljs-attr">___stringifyChildren</span>:<span class="hljs-title class_">String</span>, <span class="hljs-comment">//converts the children prop to a string using JSON.stringify </span>
  <span class="hljs-attr">___toNumeral</span>:<span class="hljs-title class_">String</span>, <span class="hljs-comment">//converts numbers to numeral formatted numbers</span>
  <span class="hljs-attr">___toStringChildren</span>:<span class="hljs-title class_">String</span>, <span class="hljs-comment">//converts the children prop to a string using toString()</span>

  
  <span class="hljs-comment">//utility properties</span>
  <span class="hljs-attr">debug</span>:<span class="hljs-title class_">Boolean</span>, <span class="hljs-comment">// A flag to output the calculated JXM props in the console</span>
  <span class="hljs-attr">test</span>:<span class="hljs-title class_">Boolean</span>, <span class="hljs-comment">// A flag to output the calculated JXM as a string component</span>
  <span class="hljs-attr">passprops</span>:<span class="hljs-title class_">Boolean</span>|[<span class="hljs-title class_">String</span>], <span class="hljs-comment">// A flag to pass parent properties to children JSONX objects (except for the style property)</span>
  <span class="hljs-attr">___template</span>:<span class="hljs-title class_">String</span>, <span class="hljs-comment">//imports JXM from a file path into the children property </span>
  
  <span class="hljs-comment">//display properties</span>
  <span class="hljs-attr">comparisonprops</span>:[<span class="hljs-title class_">Object</span>], <span class="hljs-comment">// An array of Objects used to conditionally display the current jsonx.component</span>
  <span class="hljs-attr">comparisonorprops</span>:<span class="hljs-title class_">Boolean</span>, <span class="hljs-comment">// A flag to use an or condition instead of and conditions between comparisions</span>
  
  <span class="hljs-comment">//Applied properties</span>
  <span class="hljs-attr">useformregister</span>:<span class="hljs-title class_">Boolean</span>, <span class="hljs-comment">// A flag to insert react hook form register on component (short hand for  thiscontext: { ref:['reactHookForm','register'] })</span>
  <span class="hljs-attr">useremoveprops</span>:[<span class="hljs-title class_">String</span>], <span class="hljs-comment">// remove props from component, usually used with passprops</span>
  <span class="hljs-attr">useincludeprops</span>:[<span class="hljs-title class_">String</span>], <span class="hljs-comment">// Applied Prop: includes only defined props, usually used with passprops </span>
}
</code></pre>
<h2>Simple JSONX Syntax</h2>
<p>If you want to save time, you can use the property name as the component/type and use the object value to define the rest of the JXM properties for a cleaner simple syntax</p>
<pre><code class="hljs language-javascript"><span class="hljs-comment">//shorthand simple jsonx</span>
{
  <span class="hljs-attr">ul</span>: {
    <span class="hljs-attr">props</span>:{
      <span class="hljs-attr">className</span>:<span class="hljs-string">'list-class'</span>,
    },
    <span class="hljs-attr">children</span>:[
      {
        <span class="hljs-attr">li</span>: {
          <span class="hljs-attr">children</span>:<span class="hljs-string">'first bullet'</span>,
        },
      },
      {
        <span class="hljs-attr">li</span>: {
          <span class="hljs-attr">children</span>:<span class="hljs-string">'second bullet'</span>,
        },
      },
      {
        <span class="hljs-attr">li</span>:<span class="hljs-string">'third bullet'</span>,
      },
    ]
  }
}
</code></pre>
<h3>JSONX Imperative API / Module</h3>
<pre><code class="hljs language-javascript"><span class="hljs-string">"jsonx"</span> : {
  <span class="hljs-attr">getReactElement</span>: [<span class="hljs-title class_">Function</span>: getReactElement], {<span class="hljs-attr">aliases</span>:[getRenderedJSON,getReactElementFromJSONX]} <span class="hljs-comment">//Use React.createElement and JSONX JSON to create React elements</span>
  <span class="hljs-attr">getReactElementFromJSON</span>: [<span class="hljs-title class_">Function</span>: getReactElementFromJSON], <span class="hljs-comment">// Use compiledJSON object {type,props,children} to create React elements</span>
  <span class="hljs-attr">jsonxRender</span>: [<span class="hljs-title class_">Function</span>: getRenderedJSON], <span class="hljs-comment">//Use JSONX without any configuration to render JSONX JSON to HTML and insert JSONX into querySelector using ReactDOM.render</span>
  <span class="hljs-attr">outputHTML</span>: [<span class="hljs-title class_">Function</span>: outputHTML], <span class="hljs-comment">//Use ReactDOMServer.renderToString to render html from JSONX</span>
  <span class="hljs-attr">outputJSX</span>: [<span class="hljs-title class_">Function</span>: outputJSX], <span class="hljs-comment">//Generate valid JSX from JSONX</span>
  <span class="hljs-attr">outputJSON</span>: [<span class="hljs-title class_">Function</span>: outputJSON], <span class="hljs-comment">//Generate computed static values from JSONX into JSON</span>
  <span class="hljs-attr">compile</span>: [<span class="hljs-title class_">Function</span>: compile], <span class="hljs-comment">//Generate React Function Component from JSONX</span>

  <span class="hljs-attr">jsonToJSX</span>: [<span class="hljs-title class_">Function</span>: jsonToJSX], <span class="hljs-comment">//Converts JSON to JSX</span>
  <span class="hljs-attr">__express</span>: [<span class="hljs-title class_">Function</span>: __express], <span class="hljs-comment">//render express views with JSONX</span>
  <span class="hljs-attr">__getReact</span>: [<span class="hljs-title class_">Function</span>: __getReact], <span class="hljs-comment">//Expose reference to React</span>
  <span class="hljs-attr">__getReactDOM</span>: [<span class="hljs-title class_">Function</span>: __getReactDOM], <span class="hljs-comment">//Expose reference to ReactDOM</span>
  <span class="hljs-attr">__getUseGlobalHook</span>: [<span class="hljs-title class_">Function</span>: __getUseGlobalHook], <span class="hljs-comment">//Expose reference to useGlobalHook</span>


  <span class="hljs-attr">_jsonxChildren</span>: {
    <span class="hljs-attr">getChildrenProperty</span>: [<span class="hljs-title class_">Function</span>: getChildrenProperty], <span class="hljs-comment">// returns a valid jsonx.children property</span>
    <span class="hljs-attr">getChildrenProps</span>: [<span class="hljs-title class_">Function</span>: getChildrenProps], <span class="hljs-comment">// Used to pass properties down to child components if passprops is set to true</span>
    <span class="hljs-attr">getJSONXChildren</span>: [<span class="hljs-title class_">Function</span>: getJSONXChildren], <span class="hljs-comment">// returns React Child Elements via JSONX</span>
  },
  <span class="hljs-attr">_jsonxComponents</span>: {
    <span class="hljs-attr">componentMap</span>: {}, <span class="hljs-comment">// object of all react components available for JSONX</span>
    <span class="hljs-attr">getBoundedComponents</span>: [<span class="hljs-title class_">Function</span>: getBoundedComponents], <span class="hljs-comment">// getBoundedComponents returns reactComponents with certain elements that have this bounded to select components in the boundedComponents list</span>
    <span class="hljs-attr">getComponentFromLibrary</span>: [<span class="hljs-title class_">Function</span>: getComponentFromLibrary], <span class="hljs-comment">// returns a react component from a component library (like material-ui, or semantic-ui)</span>
    <span class="hljs-attr">getComponentFromMap</span>: [<span class="hljs-title class_">Function</span>: getComponentFromMap], <span class="hljs-comment">// returns a react element from jsonx.component</span>
    <span class="hljs-attr">getReactClassComponent</span>: [<span class="hljs-title class_">Function</span>: getReactClassComponent], <span class="hljs-comment">// returns a react class component and support lifecycle functions, lazy and suspense components</span>
    <span class="hljs-attr">getReactFunctionComponent</span>: [<span class="hljs-title class_">Function</span>: getReactFunctionComponent], <span class="hljs-comment">// returns a react function component and support lifecycle functions, hooks, lazy and suspense components</span>
    <span class="hljs-title class_">FormComponent</span>: [<span class="hljs-title class_">Function</span>: <span class="hljs-title class_">FormComponent</span>], <span class="hljs-comment">// returns a helper react function component that allows you to create forms with [react-hook-form](https://react-hook-form.com/) without needed to add external form libraries</span>
    <span class="hljs-title class_">DynamicComponent</span>: [<span class="hljs-title class_">Function</span>: <span class="hljs-title class_">DynamicComponent</span>], <span class="hljs-comment">// returns a helper react function component that allows you to create components that load data and render asynchronously. </span>
  },
  <span class="hljs-attr">_jsonxProps</span>: {
    <span class="hljs-attr">getJSONXProps</span>: [<span class="hljs-title class_">Function</span>: getJSONXProps], <span class="hljs-comment">// It uses traverse on a traverseObject to returns a resolved object on propName. So if you're making an ajax call and want to pass properties into a component, you can assign them using asyncprops and reference object properties by an array of property paths</span>
    <span class="hljs-attr">getEvalProps</span>: [<span class="hljs-title class_">Function</span>: getEvalProps], <span class="hljs-comment">//Used to evalute javascript and set those variables as props. getEvalProps evaluates __dangerouslyEvalProps and __dangerouslyBindEvalProps properties with eval, this is used when component properties are functions, __dangerouslyBindEvalProps is used when those functions require that this is bound to the function. For __dangerouslyBindEvalProps it must resolve an expression, so functions should be wrapped in (). I.e. (function f(x){ return this.minimum+x;})</span>
    <span class="hljs-attr">getComponentProps</span>: [<span class="hljs-title class_">Function</span>: getComponentProps], <span class="hljs-comment">// Resolves jsonx.__dangerouslyInsertComponents into an object that turns each value into a React components. This is typically used in a library like Recharts where you pass custom components for chart ticks or plot points.</span>
    <span class="hljs-attr">getReactComponentProps</span>: [<span class="hljs-title class_">Function</span>: getReactComponentProps], <span class="hljs-comment">// Resolves jsonx.__dangerouslyInsertReactComponents into an object that turns each value into a the React component from reactComponents, componentLibraries or ReactDOM.</span>
    <span class="hljs-attr">getFunctionFromProps</span>: [<span class="hljs-title class_">Function</span>: getFunctionFromProps], <span class="hljs-comment">// Takes a function string and returns a function on either this.props or window.</span>
    <span class="hljs-attr">getFunctionProps</span>: [<span class="hljs-title class_">Function</span>: getFunctionProps], <span class="hljs-comment">// Returns a resolved object from function strings that has functions pulled from jsonx.__functionProps</span>
    <span class="hljs-attr">getWindowComponents</span>: [<span class="hljs-title class_">Function</span>: getWindowComponents], <span class="hljs-comment">// Returns a resolved object that has React Components pulled from window.__jsonx_custom_elements</span>
    <span class="hljs-attr">getComputedProps</span>: [<span class="hljs-title class_">Function</span>: getComputedProps], <span class="hljs-comment">// Returns computed properties for React Components and any property that's prefixed with __ is a computedProperty</span>
  },
  <span class="hljs-attr">_jsonxUtils</span>: {
    <span class="hljs-attr">validateJSONX</span>: [<span class="hljs-title class_">Function</span>: validateJSONX], <span class="hljs-comment">//Validates JSONX JSON Syntax</span>
    <span class="hljs-attr">displayComponent</span>: [<span class="hljs-title class_">Function</span> displayComponent], <span class="hljs-comment">// Used to evaluate whether or not to render a component</span>
    <span class="hljs-attr">traverse</span>: [<span class="hljs-title class_">Function</span> traverse], <span class="hljs-comment">//take an object of array paths to traverse and resolve</span>
    <span class="hljs-attr">getAdvancedBinding</span>: [<span class="hljs-title class_">Function</span>: getAdvancedBinding], <span class="hljs-comment">// Use to test if can bind components this context for react-redux-router</span>
  },
}
</code></pre>
<hr>
<h2><a href="../samples/index.html">Samples</a></h2>
<h3>JSONX Manual</h3>
<ul>
<li><a href="https://repetere.github.io/jsonx/">Home</a></li>
<li><a href="../getting-started/index.html">Getting Started</a></li>
<li><a href="../using-advanced-props/index.html">Using Advanced Props</a></li>
<li><a href="../using-external-and-custom-components/index.html">External and Custom Components</a></li>
<li><a href="../creating-react-components-and-component-libraries/index.html">Creating React Components and Component Libraries</a></li>
<li><a href="../spec/index.html">JSONX &amp; JXM Spec</a></li>
<li><a href="../samples/index.html">Samples</a></li>
<li><a href="../roadmap/index.html">Roadmap</a></li>
<li><a href="../../index.html">Full API Docs</a></li>
</ul>
</main>


</body></html>